<template>
  <div>
    <!-- 头部 -->
    <div class="home-head">
      <head-menu></head-menu>
    </div>
    <!-- 中间主体  -->
    <div class="home-body">
      <!-- 左侧导航 -->
      <div class="home-left" v-if="left_show">
        <!-- 菜单 -->
        <div class="home-left-menu">
          <left-menu></left-menu>
        </div>
      </div>
      <!-- 右侧网页 -->
      <div class="home-right" :style="left_show ? '' : 'margin:auto'">
        <!-- 右侧占位 -->
        <div class="home-right-line"></div>
        <!-- 右侧网页主体 -->
        <div class="home-right-body">
          <!-- 面包屑 -->
          <div style="margin-bottom:20px"  v-if="breadcrumb.length > 0">
            <el-button size="mini" class="back-html com-btn" v-if="breadcrumb.length > 2" @click="backUp()">返回</el-button>
            <!-- <i class="el-icon-back back-html" v-if="breadcrumb.length > 2" @click="backUp()"></i> -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="(item,key) in breadcrumb" :key="key">{{item}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftMenu from "./left.vue";
import headMenu from "./head.vue";

export default {
  components: { leftMenu, headMenu },
  data(){
    return{
      breadcrumb:[],
      left_show : true
    }
  },
  methods:{
    inArr(str,arr){
      for(var i in arr) {
        if(str == arr[i])return true;
      }
      return false;
    },
    //返回上级
    backUp(){
      var query = localStorage.getItem('router_query');
      query = JSON.parse(query);
      this.$router.push(query);
    },
  },
  watch:{
    $route(to,form){
      
      if(to.meta.title != undefined){
        this.breadcrumb = to.meta.title;
      }else{
        this.breadcrumb = [];
      }
      //定义数组
      var arr = ['/manage/active/add/1','/manage/active/add/2','/manage/active/add/3'];
      var title_arr = ['','发布赛事','发布活动','发布任务'];
      if(this.inArr(to.path,arr)){
        //this.left_show = false;
        this.breadcrumb[1] = title_arr[to.params.type];
      }else{
        this.left_show = true;
      }
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/app/home.css");
</style>